<template>
	<div>A</div>
	<p>{{ count }}</p>
	<p>{{ countX }}</p>
	<p>{{ state.countY }}</p>
	<p></p>
	<button @click="update">update</button>
</template>

<script>
import {
	reactive,
	ref,
	computed,
	watch,
	onBeforeMount,
	onMounted,
	onBeforeUpdate,
	onUpdated,
	onBeforeUnmount,
	onUnmounted,
} from 'vue'
// 响应式reactive和组合式composition API
export default {
	name: 'A',
	props: {
		age: Number,
	},
	emits: ['close'],
	// setup函数本身就相当于beforeCreate和created
	setup(props, context) {
		console.log(props, context)
		// 定义多个响应式数据
		const state = reactive({
			countY: '0次~~',
		})
		// 定义单个响应式数据
		const count = ref(0)

		const update = () => {
			count.value++
		}

		// 没有this
		console.log(this)
		// 触发自定义事件
		context.emit('close')

		// 定义生命周期函数
		onMounted(() => {
			console.log('onMounted')
		})
		onUpdated(() => {
			console.log('onUpdated')
		})

		// 定义计算属性
		// 只读计算属性
		const countX = computed(() => count.value + '次')
		// 可读可写计算属性
		// const countX = computed({
		//   get() {},
		//   set(val) {}
		// })

		// 定义监视属性
		watch(count, (newVal, oldVal) => {
			state.countY = newVal + '次~~'
		})

		// 数据外面要想通过this访问，必须return出去才行
		return {
			state,
			count,
			update,
			countX,
		}
	},
}
</script>

<style></style>
